<template>
  <el-config-provider :locale="locale">
    <div class="layout">
      <el-container v-if="state.showMenu" class="container">
        <el-aside class="aside">
          <div class="head">
            <img :src="logoPath" class="logo" />
          </div>
          <el-menu background-color="#fff" text-color="#3D3D3D" :router="true" :default-openeds="state.defaultOpen"
            :default-active="state.currentPath" class="menu_wrap">
            <template v-for="menu in state.menus" :key="menu.menuIndex">
              <!-- 有子菜单的情况 -->
              <el-sub-menu :index="menu.path" v-if="menu.children">
                <template #title>
                  <!-- <el-icon>
                  <component :is="menu.icon" />
                </el-icon> -->
                  <img :src="menu.icon" class="menu-icon" />
                  <span>{{ menu.title }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="child.path" v-for="child in menu.children" :key="child.menuIndex">
                    {{ child.title }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <!-- 没有子菜单的情况 -->
              <el-menu-item :index="menu.path" v-else>
                <!-- <el-icon>
                <component :is="menu.icon" />
              </el-icon> -->
                <img :src="menu.icon" class="menu-icon" />
                <span>{{ menu.title }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-container class="content">
          <Header />
          <div class="main">
            <router-view />
          </div>
        </el-container>
      </el-container>
      <el-container v-else class="container">
        <router-view />
      </el-container>
    </div>
  </el-config-provider>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import Header from "@/components/Header.vue";
import { ElConfigProvider } from "element-plus";
import zhTw from 'element-plus/es/locale/lang/zh-tw';
import initPiniaDataFromStorage from "@/utils/initPiniaDataFromStorage.js";
import config from "~/config";


const logoPath = config[import.meta.env.MODE].logo
let hasInitDataFromStorage = false;
const initGlobalDataFromStorageWhenInit = () => {
  if (!hasInitDataFromStorage) {
    initPiniaDataFromStorage();
  }
}
const noMenu = ["/login"];
const router = useRouter();
const locale = zhTw;
const state = reactive({
  showMenu: true,
  defaultOpen: [], // "/home", "/account", "/backStage"
  currentPath: "/",
  menus: [],
});

state.menus = router.options.routes
  .filter((route) => {
    return route?.meta?.menuIndex;
  })
  .map((route) => {
    const { meta, path, children } = route;
    return {
      title: meta.title,
      icon: meta.icon,
      path,
      menuIndex: meta.menuIndex,
      children: children
        ? children
          .filter((child) => child.meta.menuIndex)
          .map((child) => {
            return {
              title: child.meta.title,
              path: `${path}/${child.path}`,
              menuIndex: child.meta.menuIndex,
            };
          })
        : null,
    };
  });

router.beforeEach((to, from, next) => {
  if (to.path == "/login") {
    // 如果路径是 /login 则正常执行
    next();
  } else {
    // 如果不是 /login，判断是否有 token
    if (!localStorage.getItem("token")) {
      // 如果没有，则跳至登录页面
      next({ path: "/login" });
    } else {
      initGlobalDataFromStorageWhenInit();
      // 否则继续执行
      next();
    }
  }
  state.showMenu = !noMenu.includes(to.path);
  state.currentPath = to.path;
  document.title = to.meta.title || "Busi-System";
});
</script>

<!-- 全局样式 -->
<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 18px;
}

div {
  box-sizing: border-box;
}
</style>
<!-- layout样式 -->
<style lang="scss" scoped>
.layout {
  min-height: 100vh;
  background-color: #f7f9fc;

  .container {
    height: 100vh;

    .aside {
     // width: 340px;
      width: 250px;
      background: #ffffff;
      box-shadow: 0px 0px 12px 0px #0000004c;

      .head {
        padding-top: 40px;
        text-align: center;

        .logo {
          // width: 270px;
          // height: 74px;
          width: 180px;
          height: 49px;
        }
      }

      :deep(.menu_wrap) {
        margin-top: 80px;

        .el-menu-item {
          // padding-left: 81px;
          padding-left: 40px;
          height: 77px;

          .menu-icon {
            width: 29px;
            height: 29px;
            margin-right: 18px;
          }

          span {
            font-size: 18px;
            font-weight: bold;
          }

          &.is-active {
            color: var(--el-menu-text-color);
            &::after {
              content: "";
              position: absolute;
              right: 0;
              top: 25px;
              width: 5px;
              height: 27px;
              background-color: #2fc2af;
              border-radius: 10px;
            }
          }
          &:hover {
            background-color: unset
          }
        }
      }

      &::-webkit-scrollbar {
        width: 7px;
        height: 10px;
      }

      &::-webkit-scrollbar-track-piece {
        background-color: transparent;
        border-radius: 6px;
      }

      &::-webkit-scrollbar-corner {
        background-color: rgba(0, 0, 0, 0.3);
      }

      &::-webkit-scrollbar-thumb:horizontal {
        width: 3px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
      }

      &::-webkit-scrollbar-thumb:vertical {
        width: 3px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 6px;
      }
    }

    .content {
      flex-direction: column;

      .main {
        height: calc(100vh - 128px);
        overflow: auto;
        padding: 40px;
      }
    }
  }
}
</style>
